import React from 'react'
import {connect,} from 'react-redux'
import LocalStorageService from "../../../utils/LocalStorageService";
import FetchListComponent from "../../../shared-components/FetchListComponent/FetchListComponent";
import MessageCard from "../../../shared-components/MessageCard/MessageCard";
import NoDataPage from "../../game/Football/NoDataPage/NoDataPage";

const Message = props => {
    const uid = LocalStorageService.get('userid')
    const list = props.msg.msg.user

    const fetchList = props.doFetchMsg
    const type = 'user'
    const params = {uid, type,}
    const render = list => {
        if (list.length === 0) return <NoDataPage/>
        return list.map((item, index) => <MessageCard key= {index} message={item}/>)
    }
    return <FetchListComponent
        fetchList={fetchList}
        params={params}
        list={list}
        render={render}
    />
}

const mapState = state => ({
    user: state.user,
    msg: state.msg,
})

const mapDispatch = dispatch => ({
    doFetchMsg: (payload) => dispatch.msg.doFetchMsg(payload),
})


export default connect(mapState, mapDispatch)(Message)
